<template>
  <div class="h-100p w-100p">
    <component :is="widget.meta.selector" :widget="widget" :data="data"></component>
  </div>
</template>
<script>
import DataVBuiltInChart from './built-in-widgets/datav-built-in-chart';
import { redashService } from '@/api/datav';

export default {
  components: {
    'datav-built-in-chart': DataVBuiltInChart
  },
  data(){
    return {
      data: [],
      loading: false
    }
  },
  props: {
    widget: {
      type: Object,
      default: null
    }
  },
  watch: {
    widget: {
      deep: true,
      handler: function(){
        console.log(this.widget);
      }
    }
  },
  mounted(){
    console.log(this.widget);
    this.init();
  },
  methods: {
    init(){
      if(this.widget.meta.loadData){
        this.getData();
      }
    },
    getData(){
      if(this.widget.meta.query.dataSource.id && this.widget.meta.query.expression){
        this.loading = true;
        this.data = [];
        redashService.loadRedashData(this.widget.meta.query , {}).then(
          res => {
            if(res['data']){
              this.data = res['data'];
            }
            this.loading = false;
          }
        );
      }
    }
  }
}
</script>